<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<text class="iconfont">&#xe600;</text>
			</view>
			<view class="title">房源详情</view>
		</view>
		
		<!-- 房源基本信息 -->
		<view class="basic-info">
			<view class="unit-title">{{ housing.unit_number }}</view>
			<view class="unit-tags">
				<text class="tag">{{ housing.unit_type }}</text>
				<text class="tag status-tag">{{ housing.status }}</text>
			</view>
			
			<!-- 房源图片 -->
			<swiper v-if="housingImages.length > 0" class="image-swiper" indicator-dots autoplay>
				<swiper-item v-for="(image, index) in housingImages" :key="index">
					<image class="unit-image" :src="image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view v-else class="no-image">
				<text>暂无图片</text>
			</view>
			
			<!-- 价格信息 -->
			<view class="price-info">
				<view class="price-item">
					<text class="price">{{ housing.rental_price }}</text>
					<text class="unit">元/㎡/月</text>
				</view>
				<view class="price-item">
					<text class="label">物业费：</text>
					<text class="value">{{ housing.property_fee_standard }} 元/㎡/月</text>
				</view>
			</view>
		</view>
		
		<!-- 房源详细信息 -->
		<view class="detail-section">
			<view class="section-title">房源信息</view>
			
			<view class="detail-item">
				<text class="label">单元编号</text>
				<text class="value">{{ housing.unit_number }}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">所在位置</text>
				<text class="value">{{ housing.building.name }} {{ housing.floor ? housing.floor.actual_label : '' }}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">单元类型</text>
				<text class="value">{{ housing.unit_type }}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">当前状态</text>
				<text class="value">{{ housing.status }}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">实际面积</text>
				<text class="value">{{ housing.actual_area }} ㎡</text>
			</view>
			
			<view class="detail-item">
				<text class="label">建筑面积</text>
				<text class="value">{{ housing.building_area }} ㎡</text>
			</view>
			
			<view class="detail-item">
				<text class="label">朝向</text>
				<text class="value">{{ housing.orientation || '暂无' }}</text>
			</view>
		</view>
		
		<!-- 配套设施 -->
		<view class="detail-section">
			<view class="section-title">配套设施</view>
			<view class="facilities">
				<text class="facility-text">{{ housing.facilities_desc || '暂无配套设施信息' }}</text>
			</view>
		</view>
		
		<!-- 租赁说明 -->
		<view class="detail-section">
			<view class="section-title">租赁说明</view>
			<view class="lease-info">
				<view class="lease-item">
					<text class="dot"></text>
					<text class="text">租金按月支付，物业费按季度支付</text>
				</view>
				<view class="lease-item">
					<text class="dot"></text>
					<text class="text">需缴纳相当于两个月租金的押金</text>
				</view>
				<view class="lease-item">
					<text class="dot"></text>
					<text class="text">最短租期为一年</text>
				</view>
				<view class="lease-item">
					<text class="dot"></text>
					<text class="text">租赁申请提交后，工作人员将在1-3个工作日内审核</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="contact-btn">联系管理员</button>
			<button class="apply-btn" @click="applyForRent">申请租赁</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				housing: {},
				housingImages: [],
				userInfo: null
			}
		},
		onLoad(options) {
			this.id = options.id
			
			// 获取用户信息
			this.getUserInfo()
			
			// 从缓存获取房源详情
			const housingDetail = uni.getStorageSync('currentHousingDetail')
			if (housingDetail && housingDetail.unit_id == this.id) {
				this.housing = housingDetail
				this.processHousingImages()
			} else {
				// 如果缓存中没有，则从服务器获取
				this.fetchHousingDetail()
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					// 未登录跳转到登录页
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			},
			
			// 从服务器获取房源详情
			fetchHousingDetail() {
				uni.showLoading({
					title: '加载中'
				})
				
				uni.request({
					url: `http://localhost:8000/api/assets/units/${this.id}/`,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							this.housing = res.data.data
							this.processHousingImages()
						} else {
							uni.showToast({
								title: res.data.message || '获取房源详情失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('获取房源详情失败', err)
						uni.showToast({
							title: '获取房源详情失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 处理房源图片
			processHousingImages() {
				if (this.housing.media_urls) {
					try {
						// 尝试解析JSON
						const mediaUrls = JSON.parse(this.housing.media_urls)
						if (Array.isArray(mediaUrls)) {
							this.housingImages = mediaUrls
						}
					} catch (e) {
						console.error('解析房源图片失败', e)
						this.housingImages = []
					}
				} else {
					// 没有图片时使用默认图片
					this.housingImages = ['/static/default-housing.jpg']
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 申请租赁
			applyForRent() {
				// 检查登录状态
				if (!this.userInfo) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				
				// 检查房源状态
				if (this.housing.status !== '空置') {
					uni.showToast({
						title: '该房源当前不可租赁',
						icon: 'none'
					})
					return
				}
				
				// 跳转到申请页
				uni.navigateTo({
					url: '/pages/services/housing/apply?id=' + this.id
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx; /* 为底部操作栏留出空间 */
	}
	
	.header {
		position: relative;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}
	
	.back-icon {
		position: absolute;
		left: 30rpx;
		font-size: 36rpx;
		color: #333333;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.basic-info {
		background-color: #FFFFFF;
		padding: 30rpx;
	}
	
	.unit-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.unit-tags {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		background-color: #F0F7FF;
		color: #007AFF;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}
	
	.status-tag {
		background-color: #E6F7F0;
		color: #07C160;
	}
	
	.image-swiper {
		width: 100%;
		height: 400rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.unit-image {
		width: 100%;
		height: 100%;
	}
	
	.no-image {
		width: 100%;
		height: 400rpx;
		background-color: #F8F8F8;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.price-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.price-item {
		display: flex;
		align-items: baseline;
	}
	
	.price {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF5151;
	}
	
	.unit {
		font-size: 24rpx;
		color: #999999;
		margin-left: 6rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #999999;
	}
	
	.value {
		font-size: 28rpx;
		color: #333333;
		margin-left: 10rpx;
	}
	
	.detail-section {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}
	
	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8rpx;
		width: 8rpx;
		height: 32rpx;
		background-color: #007AFF;
		border-radius: 4rpx;
	}
	
	.detail-item {
		display: flex;
		padding: 16rpx 0;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.detail-item .label {
		width: 160rpx;
		color: #666666;
	}
	
	.detail-item .value {
		flex: 1;
		color: #333333;
	}
	
	.facilities {
		padding: 10rpx 0;
	}
	
	.facility-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
	}
	
	.lease-info {
		padding: 10rpx 0;
	}
	
	.lease-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}
	
	.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #007AFF;
		border-radius: 50%;
		margin-top: 12rpx;
		margin-right: 16rpx;
	}
	
	.text {
		flex: 1;
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.contact-btn, .apply-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}
	
	.contact-btn {
		background-color: #F0F7FF;
		color: #007AFF;
		border: 1px solid #007AFF;
	}
	
	.apply-btn {
		background-color: #007AFF;
		color: #FFFFFF;
	}
</style> 